<template>
  <div class="settings-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">系统设置</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" type="border-card">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-form :model="basicSettings" label-width="120px" class="settings-form">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            <el-form-item label="系统版本">
              <el-input v-model="basicSettings.version" placeholder="系统版本" disabled />
            </el-form-item>
            <el-form-item label="页面标题">
              <el-input v-model="basicSettings.pageTitle" placeholder="请输入页面标题" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input 
                v-model="basicSettings.description" 
                type="textarea" 
                :rows="3"
                placeholder="请输入系统描述" 
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
              <el-button @click="resetBasicSettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 界面设置 -->
        <el-tab-pane label="界面设置" name="ui">
          <el-form :model="uiSettings" label-width="120px" class="settings-form">
            <el-form-item label="主题模式">
              <el-radio-group v-model="uiSettings.theme">
                <el-radio label="light">浅色主题</el-radio>
                <el-radio label="dark">深色主题</el-radio>
                <el-radio label="auto">跟随系统</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="侧边栏">
              <el-switch
                v-model="uiSettings.sidebarCollapse"
                active-text="收起"
                inactive-text="展开"
              />
            </el-form-item>
            <el-form-item label="标签页">
              <el-switch
                v-model="uiSettings.showTabs"
                active-text="显示"
                inactive-text="隐藏"
              />
            </el-form-item>
            <el-form-item label="面包屑">
              <el-switch
                v-model="uiSettings.showBreadcrumb"
                active-text="显示"
                inactive-text="隐藏"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveUISettings">保存设置</el-button>
              <el-button @click="resetUISettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <el-form :model="securitySettings" label-width="120px" class="settings-form">
            <el-form-item label="密码策略">
              <el-checkbox-group v-model="securitySettings.passwordPolicy">
                <el-checkbox label="uppercase">必须包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">必须包含小写字母</el-checkbox>
                <el-checkbox label="numbers">必须包含数字</el-checkbox>
                <el-checkbox label="symbols">必须包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码最小长度">
              <el-input-number 
                v-model="securitySettings.minPasswordLength" 
                :min="6" 
                :max="20"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="会话超时(分钟)">
              <el-input-number 
                v-model="securitySettings.sessionTimeout" 
                :min="5" 
                :max="480"
                controls-position="right"
              />
            </el-form-item>
            <el-form-item label="登录失败锁定">
              <el-switch
                v-model="securitySettings.loginLock"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="最大失败次数">
              <el-input-number 
                v-model="securitySettings.maxLoginAttempts" 
                :min="3" 
                :max="10"
                controls-position="right"
                :disabled="!securitySettings.loginLock"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
              <el-button @click="resetSecuritySettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notification">
          <el-form :model="notificationSettings" label-width="120px" class="settings-form">
            <el-form-item label="系统通知">
              <el-switch
                v-model="notificationSettings.systemNotification"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="邮件通知">
              <el-switch
                v-model="notificationSettings.emailNotification"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="短信通知">
              <el-switch
                v-model="notificationSettings.smsNotification"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="通知类型">
              <el-checkbox-group v-model="notificationSettings.notificationTypes">
                <el-checkbox label="login">登录通知</el-checkbox>
                <el-checkbox label="error">错误通知</el-checkbox>
                <el-checkbox label="warning">警告通知</el-checkbox>
                <el-checkbox label="info">信息通知</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
              <el-button @click="resetNotificationSettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Settings',
  data() {
    return {
      activeTab: 'basic',
      // 基本设置
      basicSettings: {
        systemName: '后台管理系统',
        version: 'v1.0.0',
        pageTitle: '后台管理系统',
        description: '这是一个功能完善的后台管理系统'
      },
      // 界面设置
      uiSettings: {
        theme: 'light',
        sidebarCollapse: false,
        showTabs: true,
        showBreadcrumb: true
      },
      // 安全设置
      securitySettings: {
        passwordPolicy: ['uppercase', 'lowercase', 'numbers'],
        minPasswordLength: 8,
        sessionTimeout: 30,
        loginLock: true,
        maxLoginAttempts: 5
      },
      // 通知设置
      notificationSettings: {
        systemNotification: true,
        emailNotification: false,
        smsNotification: false,
        notificationTypes: ['login', 'error']
      }
    }
  },
  mounted() {
    this.loadSettings()
  },
  methods: {
    // 加载设置
    loadSettings() {
      // 从localStorage加载设置
      const savedSettings = localStorage.getItem('systemSettings')
      if (savedSettings) {
        try {
          const settings = JSON.parse(savedSettings)
          this.basicSettings = { ...this.basicSettings, ...settings.basic }
          this.uiSettings = { ...this.uiSettings, ...settings.ui }
          this.securitySettings = { ...this.securitySettings, ...settings.security }
          this.notificationSettings = { ...this.notificationSettings, ...settings.notification }
        } catch (error) {
          console.error('加载设置失败:', error)
        }
      }
    },
    
    // 保存基本设置
    saveBasicSettings() {
      this.saveSettings('basic', this.basicSettings)
      this.$messageBox.success('基本设置保存成功')
    },
    
    // 保存界面设置
    saveUISettings() {
      this.saveSettings('ui', this.uiSettings)
      this.$messageBox.success('界面设置保存成功')
    },
    
    // 保存安全设置
    saveSecuritySettings() {
      this.saveSettings('security', this.securitySettings)
      this.$messageBox.success('安全设置保存成功')
    },
    
    // 保存通知设置
    saveNotificationSettings() {
      this.saveSettings('notification', this.notificationSettings)
      this.$messageBox.success('通知设置保存成功')
    },
    
    // 通用保存方法
    saveSettings(type, data) {
      const savedSettings = localStorage.getItem('systemSettings')
      let settings = savedSettings ? JSON.parse(savedSettings) : {}
      settings[type] = data
      localStorage.setItem('systemSettings', JSON.stringify(settings))
    },
    
    // 重置方法
    resetBasicSettings() {
      this.basicSettings = {
        systemName: '后台管理系统',
        version: 'v1.0.0',
        pageTitle: '后台管理系统',
        description: '这是一个功能完善的后台管理系统'
      }
    },
    
    resetUISettings() {
      this.uiSettings = {
        theme: 'light',
        sidebarCollapse: false,
        showTabs: true,
        showBreadcrumb: true
      }
    },
    
    resetSecuritySettings() {
      this.securitySettings = {
        passwordPolicy: ['uppercase', 'lowercase', 'numbers'],
        minPasswordLength: 8,
        sessionTimeout: 30,
        loginLock: true,
        maxLoginAttempts: 5
      }
    },
    
    resetNotificationSettings() {
      this.notificationSettings = {
        systemNotification: true,
        emailNotification: false,
        smsNotification: false,
        notificationTypes: ['login', 'error']
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  padding: 20px;
  
  .settings-card {
    .card-header {
      .card-title {
        font-size: 18px;
        font-weight: bold;
        color: #303133;
      }
    }
    
    .settings-form {
      max-width: 600px;
      margin-top: 20px;
      
      .el-form-item {
        margin-bottom: 20px;
      }
    }
  }
}
</style> 